import React, {propTypes} from 'react';
import LayerTitle from './LayerTitle.jsx';
import { Breadcrumb } from 'antd';
import $ from 'jquery';

class PointLayerControl extends React.Component {
  static propTypes: {
     titleName: PropTypes.string.isRequired,
     data: PropTypes.array.isRequired,
     selectPoint: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);    

    this.state = {
        visible: true,
        total: 0,
        selectedIndex: -1
    }
  }

  setVisibility() {
    this.setState({
      visible: !this.state.visible
    });
    var visible = this.state.visible;
    if(visible == true) {

    }
  }

  /**
   * 左侧选中网点
   */
  selectPoint(index, point) {
    this.setState({
      selectedIndex: index
    });
    this.props.selectPoint(point, "selectPoint");
  }
  
  /**
   * 地图上选中网点，左侧高亮
   */
  clickPoint(point) {
    var that = this;
    this.props.data.map(function(d, index){
      if(point.id === d.id) {
        that.setState({
          selectedIndex: index
        });
        // console.log($(that.refs["li_"+index]));
      }
    });
  }

  render() {
    var lists = [];
    var that = this;
    const selectedIndex = this.state.selectedIndex;
    if(this.props.data.length>0) {
        var li = this.props.data.map(function(point, index){
          lists.push(
            <li key={index} ref={"li_" + index}
              onClick={that.selectPoint.bind(that, index, point)}
              className={index===selectedIndex ? "active" : ""}
              >
              {point.name}
            </li>
          );
        });
    }
    return (
      <div className="maplayer-control">
        <LayerTitle visible={this.state.visible}
          setVisibilityFuc={this.setVisibility.bind(this)} 
          titleName={this.props.titleName}
          totalNumber={this.props.data.length}
        />
        <Breadcrumb separator=">">
          <Breadcrumb.Item>全部</Breadcrumb.Item>
        </Breadcrumb>

        <ul className="data-list">
          {lists}
        </ul>
      </div>
    );
  }
}; 

export default PointLayerControl;


